import { computed, reactive, ref } from 'vue'
import { MaterialTableState } from '../types'

export default function useHandleMaterialList() {
  const materialTableState = reactive<MaterialTableState>({
    selectedRowKeys: [],
    tableData: [],
    tableSize: 'small',
    tableColumns: [
      {
        dataIndex: 'id',
        title: '素材ID',
      },
      {
        dataIndex: 'image',
        title: '预览图',
        customRender: ({ text }) => <a-image width={200} src={text} />,
      },
      {
        dataIndex: 'authorId',
        title: '作者ID',
      },
      {
        dataIndex: 'width',
        title: '宽高',
        customRender: (row) => `${row.record.width} x ${row.record.height}`,
      },
      {
        dataIndex: 'status',
        title: '审核状态',
      },
      {
        dataIndex: 'createTime',
        title: '创建时间',
      },
      {
        dataIndex: 'updateTime',
        title: '更新时间',
      },
      {
        dataIndex: 'options',
        title: '操作',
        slots: {
          customRender: 'options',
        },
      },
    ],
  })

  const pageInfo = ref({
    current: 1,
    pageSize: 10,
    total: 0,
  })

  const isSelectRow = computed(
    () => materialTableState.selectedRowKeys.length > 0
  )

  const rowSelection = {
    onChange: (selectedRowKeys: string[]) => {
      materialTableState.selectedRowKeys = selectedRowKeys
    },
  }

  return { materialTableState, pageInfo, rowSelection, isSelectRow }
}
